<script setup lang="ts" generic="U= string | number">
import { toRefs, computed } from 'vue';

const props = defineProps<{
    height?: U,
}>()
const { height } = toRefs(props)

const emit = defineEmits<{
    reload: [],
    change: [U],
}>()

const heightAuto = computed(() => height.value ? '200px' : height.value)

const handleReload = () => emit('reload')
</script>
<template>
    <div id="containerNoData" :style="{ height: heightAuto}">
        <div @click="handleReload">
            <p>暂无内容</p>
        </div>
    </div>
</template>
<style scoped>
#containerNoData {
    display: flex;
    width: 100%;
    min-height: 150px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    border: #898A8C 1px solid;
    border-radius: 12px;
}

p {
    text-align: center;
    margin-top: -20px;
    font-size: 16px;
    color: #898A8C;
}
</style>